<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Rabbits</title>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        html {
            font-size: 90%;
        }
        button {
            background-color: rgb(255, 187, 0);
            color: black;
        }
    </style>
</head>

<body>

    <h4>1. The rules of reproduction (
        <a href="rabbit_animation.html " target="_blank">Animation</a>)</h4>
    In a population of rabbits...
    <ul>
        <li>half of the new born rabbits survive their first year</li>
        <li>of those, half survive their second year</li>
        <li>the maximum life span is three years</li>
        <li>rabbits produce 0, 6, 8 rabbits in their first, second, and third years.</li>
    </ul>

    <h4>2. Enter the starting population</h4>
    <div style="display:inline-block">
        <span>Age 0-1</span>
        <input id="zero_input" type="number">
        <br>
        <span>Age 1-2</span>
        <input id="one_input" type="number">
        <br>
        <span>Age 2-3</span>
        <input id="two_input" type="number">
        <br>
    </div>
    <h4>3. Fastforward in time and see how the ratio of babies, one-year olds and two-year olds change as time goes. (Hover over
        the bars to see the exact proportions.)</h4>
    <button id="iterate-button" onclick="fastforward()">Fastforward 1 year</button>
    </div>
    <div id="plot">
    </div>

    <h4>4. Can you guess limiting proportions? (E.g. 5:7:2)
    </h4>
    <input id="coord1" type="number" style="width:5%"> :
    <input id="coord2" type="number" style="width:5%"> :
    <input id="coord3" type="number" style="width:5%">
    <button id="submit-button" onclick="testAnswer()">Submit</button>

    <h4>5. Now try starting from a different starting population and see if the you end up with the same proportions.</h4>
    <h4>6. Also try entering the limiting proportions you've found in #4 as the starting population. How can you describe what
        happens to the population after one year?</h4>

    <div id="message"></div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script>

        function setData() {
            data[0].x[2] = $("#zero_input").val() / $("#two_input").val();
            data[0].x[1] = $("#one_input").val() / $("#two_input").val();
            data[0].x[0] = 1;
            Plotly.newPlot('plot', data, layout, options);
        }

        function fastforward() {
            var oldData = [$("#zero_input").val(), $("#one_input").val(), $("#two_input").val()];
            $("#zero_input").val(6 * oldData[1] + 8 * oldData[2]);
            $("#one_input").val(oldData[0] / 2);
            $("#two_input").val(oldData[1] / 2);
            setData();
        }

        function testAnswer() {
            var vec = [$("#coord1").val(), $("#coord2").val(), $("#coord3").val()];
            console.log(vec);
            if (vec[0] == 16 * vec[2] && vec[1] == 4 * vec[2] && vec[2] != 0) {
                alert("That's right!");
            } else {
                alert("Not correct. Try fastforwarding more and read the numbers on the bar diagram.");
            }
        }

        var data = [{
            type: 'bar',
            x: [0, 0, 0],
            y: ['Age 2-3', 'Age 1-2', 'Age 0-1'],
            orientation: 'h'
        }];
        var layout = {
            autosize: false,
            width: 300,
            height: 150,
            margin: {
                b: 0,
                t: 0,
            },
        }
        var options = {
            showLink: false, // removes the link to edit on plotly - works
            modeBarButtonsToRemove: ['toImage', 'zoom2d', 'pan', 'pan2d', 'autoScale2d'],
            displayLogo: false, // this one also seems to not work
            displayModeBar: false, //this one does work
        };


        $(document).ready(function () {
            setData();
        })
    </script>
</body>


</html>